<template>
	<view class="capacity">
	<!-- 	<view class="capac">
			<view class="capace">
				<view style="display: flex;align-items: center;margin-top: 10px;">
					<image src="../../static/img/icon_jiqiache_xiao@2x.png" mode="" style="width: 18px;height: 22px;"></image>
					<text style="color: #042A58;font-size: 16px;margin-left: 15px;">浙A123456</text>
				</view>
				<view style="margin-right: 15px;">
					<text style="color: #002CFF;font-size: 16px;">入网</text>
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;height: 50px;">
				<text class="captext">张学友</text>
				<text class="captext">18873829838</text>
				<text class="captext">37.5m</text>
			</view>
		</view> -->
		<view class="capac" v-for="(v,i) in list" :key="i">
			<view class="capace">
				<view style="display: flex;align-items: center;margin-top: 10px;">
					<image src="../../static/img/icon_jiqiache_xiao@2x.png" mode="" style="width: 18px;height: 22px;"></image>
					<text style="color: #042A58;font-size: 16px;margin-left: 15px;">{{v.carnumber}}</text>
				</view>
				<view style="margin-right: 15px;">
					<text style="color: #002CFF;font-size: 16px;" v-if="v.source==2">入网</text>
					<text style="color: #FE0700;font-size: 16px;" v-if="v.source==1">未入网</text>
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;height: 50px;justify-content: space-between;">
				<view class="">
					<text class="captext">{{v.drivername}}</text>
					<text class="captext">{{v.drivermobile}}</text>
					<text class="captext">{{v.weight}}m</text>
				</view>
				<view style="width: 72px; height: 32px;background:rgba(245,245,245,1);border-radius: 6px;display: flex;align-items: center;justify-content: center;margin-right: 5px;"  v-if="v.source==1">
					<image src="../../static/img/icon_shanchu%20@2x.png" mode="" style="width: 14px;height: 14px;"></image>
					<text style="color: #9B9B9B;font-size: 12px;" @click="none(i)">删除</text>
				</view>
			</view>
		</view>
		<view class="loading" >{{ loadingTxt }}</view>
		<button @click="ass">全网司机关联</button>
	</view>
</template>

<script>
	import { ajaxs } from '../../apis.js';
	import { ajax } from '../../api.js';
	var page = 1;
	export default {
		data() {
			return {
				list:[],
				loadingTxt: '加载更多',
			}
		},
		onShow() {
			this.assocition()
		},
		onPullDownRefresh() {
			this.assocition()
		},
		onReachBottom() {
			this.getassocition()
		},
		methods: {
			getassocition(){
				this.loadingTxt="加载中"
				var that=this
				ajaxs({
					url:"/v1/capacity/list",
					method:"post",
					data:{
						offset: page,
						limit: 20
					},
					success(res){
				if(page>res.data.pageInfo.pages){
						that.loadingTxt = '已经全部加载';
						uni.hideNavigationBarLoading();
						return false;
					}
					
				uni.hideNavigationBarLoading()
				that.list = that.list.concat(res.data.list);
				uni.stopPullDownRefresh()
				 page++
				 }
				 })
			},
			assocition(){
				page=1;
				var that=this
				ajaxs({
					url:"/v1/capacity/list",
					method:"post",
					data:{
						offset: page,
						limit: 20
					},
					success(res){
						
						that.list=res.data.list
						uni.stopPullDownRefresh()
						 uni.hideNavigationBarLoading()
						 page++
					}
				})
			},
			none(i){
				var that=this
				var add=[]
				add=this.list[i].id
				uni.showModal({
							
				    content: '请您确认是否删除关联司机？',
									
				    success: function (res) {
				      if (res.confirm) {//这里是点击了确定以后
							ajaxs({
								url:"/v1/capacity/delete",
								method:"post",
								data:{
								     "ids[]": add
								},
								success(res){
								this.assocition()
								}
							})
				      } else {//这里是点击了取消以后
									
				      }
									
				    }
									
				  })
			},
			ass(){
				uni.navigateTo({
					url:"./Association"
				})
			}
		}
	}
</script>

<style>
	.capacity{
		background: #F5F5F5;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
.capac{
	width:355px;
	height:97px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	margin-top: 10px;
}
.capace{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 46px;
	border-bottom:1px solid #F5F5F5 ;
	margin-left:15px;
	overflow: hidden;
}
.captext{
	color:#5A7391;
	font-size: 14px;
	margin-left: 15px;
}
button{
	width:355px;
	height:44px;
	background:rgba(4,42,88,1);
	border-radius:8px;
	color: #FFFFFF;
	position:fixed;
	bottom: 10px;
}
.loading {
	text-align: center;
	color: #888;
	margin-top: 10px;
	margin-bottom: 70px;
}
</style>
